<template>
  <div class="subPage">
    <nav-bar
      :title="navTitle" 
      position="center" 
      color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
      :rowColor="'white'" 
      :goBack="goBack" 
      :isMsg='false' 
      fontColor='#fff' ></nav-bar>
    <div class="flexContent" >
      <scroll-view 
      :scroll-y="true"  
      :show-scrollbar="false"
      v-if="recordList.length>0"
      style="height:100%;overflow-y: scroll;"
      :refresher-triggered="triggered" 
      :refresher-enabled="enabled" 
      @refresherrefresh="queryList"
      :scroll-with-animation='true'
      >
        <div class="liveBox" v-for="(item,index) in recordList" :key="item.type_id" @click="goliveRoom(item)">
          {{item.dept_name}}
          <img :src="rigthRowIcon" alt="">
          <div class="baseLine" v-if="index!==recordList.length-1"></div>
        </div>
      </scroll-view>
      <div v-else class="noDataImg">
        <img :src="noDataImg"/>
      </div>
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
import api from "@/api/api";
import storage from "@/utils/storage";
import navBar from '@/components/navBar'
import { mapState } from 'vuex'
const { $Toast, $Message } = require("../../../../../static/iview/base/index");
export default {
  components: {
    navBar
  },
  computed: {
    ...mapState([
      'ifIphonex'
    ])
  },
  data() {
    return {
      userInfo: {},
      imgUrl: "",
      noDataImg: '',
      navTitle: "健康教育",
      recordList: [],
      triggered: false,
      enabled: false,
      rigthRowIcon: ""
    };
  },
  onLoad(options) {
    this.imgUrl = api.imgUrl;
    this.userInfo = this.$storage.getAccountInfo();
    this.noDataImg = this.imgUrl + 'noData.png'
    this.rigthRowIcon = this.imgUrl + "right.png"
  },
  onShow() {
    this.queryList()
  },
  onUnload() {
  },
  methods: {
    // 获取视频科室列表
    queryList() {
      let param = {
        video_type: this.$route.query.video_type
      }
      this.triggered = true
      this.$api.videoTypeDept(param,({'showLoading': true})).then(res=>{
        this.triggered = false
        this.recordList = res.data
      })
    },
    //  视频列表
    goliveRoom (item) {
      this.$router.push({
        path: "/pages/subPage/liveVideoArea/liveVideo/main",
        query: {
          video_type:this.$route.query.video_type,
          type_id: item.type_id
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped lang="less">
.subPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #F9F9F9;
}
.flexContent {
  display: flex;
  flex: 1;
  height: 100%;
  position: relative;
  flex-direction: column;
  overflow-y: scroll;
  .liveBox {
    height: 114rpx;
    box-sizing: border-box;
    padding: 0 0 0 41rpx;
    font-size: 30rpx;
    line-height: 114rpx;
    color: #333333;
    position: relative;
    background-color: #fff;
    img {
      height: 30rpx;
      width: 17rpx;
      position: absolute;
      top: 50%;
      right: 30rpx;
      transform: translateY(-50%);
    }
    .baseLine {
      position: absolute;
      bottom: 0;
      height: 2rpx;
      width: 100%;
      background-color: #EDECEC;
    }
  }
  .blueColor {
    color: #4A71E8;
  }
  .noDataImg {
    flex: 1;
  }
  .ipxBottom {
    height: 30rpx;
  }
}
</style>
